<template>
  <div class="chart-container">
    <el-form ref="roleRef2" :model="dataInfo" label-width="120px">
      <h2 style="color: red;text-align: center;width: 1200px;">传感器IMEI:{{ dataInfo.sns_IMEI }} - {{ time }}</h2>
      <el-row style="width: 1200px;margin-top: 30px;">
        <el-col :span="8">
          <el-form-item label="X轴加速度">
            <el-input v-model.trim="dataInfo.x_Acc" boe readonly maxlength="30" placeholder="-" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Y轴加速度">
            <el-input v-model.trim="dataInfo.y_Acc" boe readonly maxlength="30" placeholder="-" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Z轴加速度">
            <el-input v-model.trim="dataInfo.z_Acc" boe readonly maxlength="30" placeholder="-" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="X轴振速">
            <el-input :value="dataInfo.x_Vv" readonly maxlength="30" placeholder="-" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Y轴振速">
            <el-input :value="dataInfo.y_Vv" readonly maxlength="30" placeholder="-" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Z轴振速">
            <el-input :value="dataInfo.z_Vv" readonly maxlength="30" placeholder="-" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电压">
            <el-input v-model.trim="dataInfo.battery" readonly maxlength="30" placeholder="-" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="温度">
            <el-input :value="dataInfo.temperature" readonly maxlength="30" placeholder="-" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="信号强度">
            <el-input :value="dataInfo.signal" readonly maxlength="30" placeholder="-" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { useDark, useToggle } from '@vueuse/core'
const isDarkMode = useDark()
const route = useRoute();
const { proxy } = getCurrentInstance();
const time = ref(null);
// 显示加载提示
proxy.$modal.loading("正在加载...");
const form2 = ref({
  id: null,
  ua: null,
  ua_st: null,
  ub: null,
  ub_st: null,
  over: null,
  uc: null,
  uc_st: null,
  u0: null,
  u0_st: null,
  ts: null,
})
const dataInfo = ref({})
const id = ref(null);

// 在 onMounted 钩子的开始处添加
onMounted(() => {
  let { dev_id, show_ts,ts } = route.query;
  time.value = ts;
  
  proxy.cloudTv_API.ShowAlarmInfo({
    dev_id: dev_id,
    ts: show_ts
  }).then(res => {
    dataInfo.value = res.data || {};
  }).finally(() => {
      proxy.$modal.closeLoading();
    });
});
</script>

<style lang="scss" scoped>
.chart-container {
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: calc(100vh - 84px);
  overflow-y: auto;

  .mt20 {
    margin-top: 20px;
  }
}
</style>